import { defineStore } from "pinia";
import { getLocalStorage } from "@/utils/tools";
import { RouteLocationNormalizedLoaded } from "vue-router";

// 侧边栏配置
interface SideBarConfig {
  theme?: "dark" | "light";
  width?: number;
  showLogo?: boolean;
}

interface HeaderConfig {
  breadcrumb?: boolean;
  showTitle?: boolean;
  showSearch?: boolean;
  showFullScreen?: boolean;
  showLocale?: boolean;
  showTabs?: boolean;
}

interface AppStore {
  loading: boolean;
  isMobile: boolean;
  collapsed: boolean;
  isFixedNav: boolean;
  tabs: RouteLocationNormalizedLoaded[];
  cancelTokens: any[];
  locale: string | null;
  sideBarConfig: SideBarConfig;
  headerConfig: HeaderConfig;
  sidebarStatus: boolean;
}

const initSideBarConfig: SideBarConfig = {
  theme: "light",
  width: 250,
  showLogo: true,
};

const initHeaderConfig: HeaderConfig = {
  breadcrumb: true,
  showTitle: true,
  showSearch: true,
  showFullScreen: true,
  showLocale: true,
  showTabs: true,
};

// 获取侧边栏配置
const getSideBarConfig = (): SideBarConfig => {
  if (
    localStorage.getItem("sysSettings") &&
    JSON.parse(localStorage.getItem("sysSettings") as string).sideBarConfig
  ) {
    return JSON.parse(localStorage.getItem("sysSettings") as string)
      .sideBarConfig;
  } else {
    return initSideBarConfig;
  }
};

// 获取头部配置
const getHeaderConfig = (): HeaderConfig => {
  if (
    localStorage.getItem("sysSettings") &&
    JSON.parse(localStorage.getItem("sysSettings") as string).headerConfig
  ) {
    return JSON.parse(localStorage.getItem("sysSettings") as string)
      .headerConfig;
  } else {
    return initHeaderConfig;
  }
};

export const useAppStore = defineStore({
  id: "app",
  state: (): AppStore => {
    return {
      loading: false,
      isMobile: false,
      collapsed: false,
      isFixedNav: false,
      tabs: [],
      cancelTokens: [], // http请求取消的方法列表
      sideBarConfig: getSideBarConfig(),
      headerConfig: getHeaderConfig(),
      locale: localStorage.getItem("locale")
        ? localStorage.getItem("locale")
        : "zh-cn",
      sidebarStatus: getLocalStorage("sidebarStatus")
        ? Boolean(getLocalStorage("sidebarStatus"))
        : false, // 左侧栏是否展开，默认展开
    };
  },
  getters: {},
  actions: {
    setMobile(val: boolean) {
      this.isMobile = val;
    },
    setCollapsed(val: boolean) {
      this.collapsed = val;
    },
    setSidebar(val: boolean) {
      this.sidebarStatus = val;
    },
    setFixedNav(val: boolean) {
      this.isFixedNav = val;
    },
    setSideBarWidth(val: number) {
      this.sideBarConfig.width = val;
    },
    setBreadcrumbStatus(val: boolean) {
      this.headerConfig.breadcrumb = val;
    },
    resetTabs() {
      this.tabs = [];
    },
    saveSetting() {
      const settings = {
        sideBarConfig: this.sideBarConfig,
        headerConfig: this.headerConfig,
      };
      localStorage.setItem("sysSettings", JSON.stringify(settings));
    },
    resetSetting() {
      localStorage.removeItem("sysSettings");
      window.location.reload();
    },
    // 语言改变设置
    changeLocale(val: string) {
      this.locale = val ? val : "zh-cn";
      localStorage.setItem("locale", this.locale);
      window.location.reload();
    },
    addCancelTokens(fn) {
      this.cancelTokens = [...this.cancelTokens, fn];
    },
    clearCancelTokens() {
      this.cancelTokens.forEach((fn) => fn());
      this.cancelTokens = [];
    },
  },
});
